<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>车辆监控系统</title>
</head>

<body>
  <div id="app" class="container">
    <div class="main">
      <div class="left">

        <!-- <form class="input-holder" action="saveReport.htm" method="post">
          <input id="input" @keyup.enter.prevent="sendPath" placeholder="video path" class="file-input text1"
            type="text">
          <img v-on:click.prevent="sendPath" id="confirm" src="https://img.icons8.com/ios/27/000000/search--v1.png" />
        </form> -->
        <div class="input-holder">
          <input id="input" @keydown.enter="sendPath" placeholder="video path" class="file-input text1" type="text">
          <img v-on:click.prevent="sendPath" id="confirm" src="./web/search--v1.png" />
        </div>
        <div class="wait" v-if="status===1">
          <div>
            Please enter the video path
          </div>
        </div>
        <div class="wait" v-if="status===2">
          <div class="processing">
            Processing
          </div>
        </div>
        <div class="loaded" v-if="status===3">
          <img class="predict" :src="currentImg" alt="#">

          <!-- 每一帧检测到的物体 -->
          <div class="objects scroll-x">
            <div class="object" v-for="object in objects">
              <img class="obj-img" :src="object.picadd" alt="">
              <div class="class text2">{{object.type}}</div>
            </div>
          </div>

        </div>
      </div>
      <div class="right">
        <!-- 拖动条 -->
        <div class="scroll" id="scroll">
          <div @mousedown="listenDown" @mouseup="listenUp" @mousemove="listenDrag" class="bar"></div>
          <div class="mask"></div>
        </div>
        <div class="controler">
          <img @click="listenPlay" :src="canPlay == true ? playImg : stopImg" />
          <img @click="listenPre" :src="preImg" />
          <img @click="listenNext" :src="nextImg" />
        </div>
        <!-- 车牌 -->
        <div>
          <div class="car-list">
            <div class="car-item" v-for="car in cars">
              <img class="car-img" :src="car.picadd" alt="">
              <div class="car-info">
                <div class="car-num text3">{{car.plate_number}}</div>
                <div class="confidence">置信度:{{car.confidence}}</div>
              </div>
            </div>
          </div>

          <!-- 图表 -->
          <div class="chart">
            <div ref="chart" id="chart" style="width: 100%; height:350px;"></div>
          </div>

        </div>
      </div>
    </div>
  </div>


  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
  <script src="main.js"></script>
</body>

</html>